<!DOCTYPE html>
<html>
<head>
    <title>门店惊喜--金银猫CSmall</title>
    <meta name="keywords" content="{$metaKeywords}"/>
    <meta name="description" content="{$metaDesc}"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico">
    <link type="text/css" rel="stylesheet" href="../css/common.css">
    <link type="text/css" rel="stylesheet" href="../css/raise.css">

    <script src="js/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="js/eui.js"></script>
    <script src="js/axios.min.js"></script>

    <style>
        .protype{
            height: 20px;
            width: 50px;
            border: 1px solid #909399;
            margin-right: 4px;
            cursor: pointer;
        }
        .protypeClick{
            border: 1px solid red;
            background-color: white;
            margin-right: 4px;
            color: red;
        }
        #nav{
            background-color: #820c0c;
        }
        #nav li .nava{
            color: white;
        }
    </style>
</head>

<body>
<!--头部部分 开始-->

<!--登录状态栏 开始-->
<div class="topbar">
    <div class="wrap iconlist">
        <div class="memberbox width-6">嗨！欢迎来到金猫银猫 <a href="#">请登录</a>  <a href="#">免费注册</a> </div>
        <div class="width-6">
            <a href="#"><i class="icon_heart icon_topbar"></i>我关注的品牌</a>
            <a href="#">金猫银猫会员</a>
            <a href="#"><i class="icon_shopcart icon_topbar"></i>购物车<span id="shopcart_count">0</span>件</a>
            <span class="fav">收藏夹<i class="icon icon_dropdown"></i></span> |
            <span><i class="icon_phone icon_topbar"></i>手机版</span>
            <span class="fav">商家支持<i class="icon icon_dropdown"></i></span>
            <span class="fav"><i class="icon_shopcart icon_topbar"></i>网站导航<i class="icon icon_dropdown"></i></span>
        </div>
    </div>
</div>
<!--登录状态栏 结束-->

<div  id="header">
    <div class=" wrap">
        <div class="logobar width-3">
        </div>

        <!--搜索栏 开始-->
        <div id="searchbar" class="width-6">
            <form method="get" action="/searchResult.html">
                <input type="text" name="keywords" class="txt" value="" placeholder="站内搜索"/>
                <input type="submit" class="bt" value="搜索"/>
                <div class="clear"></div>
            </form>
            <a href="#">手链</a> |
            <a href="#">项链</a> |
            <a href="#">手镯</a> |
            <a href="#">戒指</a> |
            <a href="#">耳环</a> |
            <a href="#">耳钉</a> |
            <a href="#">胸针</a> |
            <a href="#">耳夹</a>
        </div>
        <!--搜索栏 结束-->

    </div>
</div>

<div style="clear:both"></div>

<!--导航 开始-->
<div id="nav" >
    <ul class="wrap">
        <li class="width-1"><a  href="/brand.html"   class="nava">施华洛世奇</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">潘多拉</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">ZENGLIU</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">卡蒂罗</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">东方佳人</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">GLTEN</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">VIGG</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">花芽</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">瑷嘉莎</a></li>
        <li class="width-1"><a  href="/brand.html"   class="nava">爱洛奇</a></li>
    </ul>
    <div class="clear"></div>
</div>
<!--导航 结束-->

<!--头部部分 结束-->


<div style="clear:both"></div>
<div id="mainer">
    <div class="wrap">

        <ul>
            <li style="background: url(../pic/raise_06.jpg) center">
                <a href="#" target="_blank">

                </a></li>
        </ul>
    </div>


</div>

<div class="clear"></div>
<div id="app">
    <div class="wrap">
        <div class="raise_left">
            <div class=" hang hang1 box">
                <div class="t">{{productInfo[0].title}}</div>
                <div class="c">
                    <a class="pic"><img src="../pic/raise_18.jpg"></a>
                    <div class="info">
                        <h4>{{productInfo[0].title}}</h4>
                        <p>
                        <h5 style="margin: 0">  原价: ¥ <s v-model="oldPrice">{{oldPrice}}</s></h5>
                        <h2><font color="red">本店价:¥<span v-model="price"> {{price}}</span></font></h2>
                        </p>



                        <div class="pricelist">
                            <h4>请选择规格:</h4>
                            <span class="protype" v-for="pt in productTypeInfo" :id="'pt_'+pt.id" @click="changeClass(pt.id)">{{pt.proDesc}}</span>
                            <input type="hidden" id="h">
                            <br>
                            <div class="clear"></div>
                        </div>
                        <a class="redbtn" type="button">立即购买</a>
                        <a class="redbtn" type="button">加入购物车</a>
                        <a class="redbtn" type="button">收藏商品</a>
                        <br>
                        商品剩余数量：<span v-model="productTotal">{{productTotal}}</span>
                    </div>
                    <div class="clear"></div>
                </div>


            </div>
        </div>
        <div class="raise_right">
            <div class="hang hang2 box">
                <div class="t">中国白银集体众筹开始</div>
                <div class="c">有创意!有项目!缺资金?众筹网来帮你,发起你的项目,展示你的创意,获得大家的支持!也可以支持别人项目获得丰厚回报!</div>
            </div>
            <div class=" hang hang3">
                <a href="#"><img src="../pic/raise_22.jpg"></a>
                <a href="#"><img src="../pic/raise_24.jpg"></a>

            </div>
        </div>

    </div>
</div>

<!-- 右侧黑色边栏 开始-->
<div class="mui-mbar-tabs-mask">
    <div class="mui-mbar-tab mui-mbar-tab-cart" style="top: 0px; margin: 8px 0px;">
        <div class="mui-mbar-tab-logo mui-mbar-tab-logo-cart"></div>
        <div class="mui-mbar-tab-txt">购物车</div>
        <div class="mui-mbar-tab-sup"><div class="mui-mbar-tab-sup-bg"><div class="mui-mbar-tab-sup-bd">7</div></div></div>
    </div>
    <div class="mui-mbar-tab mui-mbar-tab-asset" style="top: 0px; margin: 8px 0px;">
        <div class="mui-mbar-tab-logo mui-mbar-tab-logo-asset"></div>
        <div class="mui-mbar-tab-tip" >我的资产<div class="mui-mbar-arr mui-mbar-tab-tip-arr">◆</div></div>
    </div>
    <div class="mui-mbar-tab mui-mbar-tab-brand" style="top: 0px; margin: 8px 0px;">
        <div class="mui-mbar-tab-logo mui-mbar-tab-logo-brand"></div>
        <div class="mui-mbar-tab-tip" >我关注的品牌<div class="mui-mbar-arr mui-mbar-tab-tip-arr">◆</div></div>
    </div>
    <div class="mui-mbar-tab mui-mbar-tab-favor" style="top: 0px; margin: 8px 0px;">
        <div class="mui-mbar-tab-logo mui-mbar-tab-logo-favor"></div>
        <div class="mui-mbar-tab-tip" >我的收藏<div class="mui-mbar-arr mui-mbar-tab-tip-arr">◆</div></div>
    </div>
    <div class="mui-mbar-tab mui-mbar-tab-favor" style="top: 0px; margin: 8px 0px;">
        <div class="mui-mbar-tab-logo mui-mbar-tab-logo-favor"></div>
        <div class="mui-mbar-tab-tip" >我的收藏<div class="mui-mbar-arr mui-mbar-tab-tip-arr">◆</div></div>
    </div>
    <div class="mui-mbar-tab mui-mbar-tab-foot" style="top: 0px; margin: 8px 0px;">
        <div class="mui-mbar-tab-logo mui-mbar-tab-logo-foot"></div>
        <div class="mui-mbar-tab-tip" >我的收藏<div class="mui-mbar-arr mui-mbar-tab-tip-arr">◆</div></div>
    </div>
</div>
<!-- 右侧黑色边栏 结束-->
<div class="clear"></div>
</div>
<div id="footer">
    <div class="wrap">
        <div class="line"></div>
        <div class="help">
            <dl class="width-2">
                <dt>购物指南</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>购物保障</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>售后服务</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>关于我们</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-4">
                <dt>手机上金猫银猫</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>


            <div style="clear:both"></div>
        </div>
        <!-- help -->
    </div>
    <!-- copyright -->
    <div class="copyright">
        <p class="copy wrap">
            <a href="#">关于金猫银猫</a>
            <a href="#">帮助中心</a>
            <a href="#">诚聘英才</a>
            <a href="#">联系我们</a>
            <a href="#">网站合作</a>
            <a href="#">法律声明</a>
            <a href="#">廉政举报</a><br>
            <a href="#">京东商城</a> |
            <a href="#">中国白银网</a> |
            <a href="#">央视网</a> |
            <a href="#">1号店</a> |
            <a href="#">京东商城</a> |
            <a href="#">中国白银网</a> |
            <a href="#">央视网</a> |
            <a href="#">1号店</a> <br>

            <a href="http://www.csmall.com/help.do?page=help_help_icp" target="_blank">中国增值电信业务经营许可证 B2-20140169号</a>
            <span style="line-height:1.5;"> | ©2014深圳银瑞吉文化发展有限公司 All Rights Reserved | 国家信息产业部粤ICP备14018586号</span>
            <span class="powerby">技术支持：<a href="http://www.jentian.com/" target="_blank" title="广东井田云科技有限公司">井田云</a>
                        <br>
                        <a href="http://si.trustutn.org/info?sn=131141223010513021410" target="_blank"><img
                                src="http://v.trustutn.org/images/cert/bottom_small_img.png" alt="实名认证"
                                title="实名认证"></a>
                    </span>
        </p>
    </div>

    <div class="clear"></div>
</div>
<script>
    let v = new Vue({
        el:"#app",
        data:{
            productInfo:"",
            productTypeInfo:"",
            productTotal:"",
            idsStart:"",
            idsEnd:"",
            ids:[],
            priceInfo:[],
            oldPriceInfo:[],
            productTotalInfo:[],
            price:"",
            oldPrice:""
        },

        created:function () {
            let productId = location.search.split("=")[1];
            axios.get("/index/detail?id="+productId).then(function (response) {
                v.productInfo = response.data;
            })

            axios.get("/index/protype?productid="+productId).then(function (response) {
                v.productTypeInfo = response.data;
                for(let i=0;i<v.productTypeInfo.length;i++){
                    v.idsEnd = id = v.productTypeInfo[i].id;
                    v.ids[id] = id;
                    v.priceInfo[id] = v.productTypeInfo[i].price;
                    v.oldPriceInfo[id] = v.productTypeInfo[i].oldPrice;
                    v.productTotalInfo[id] = v.productTypeInfo[i].total;
                }
                v.idsStart = v.idsEnd - v.productTypeInfo.length + 1;
            })
        },
        methods:{
            changeClass(id){
                 for(let i=v.idsStart;i<=v.idsEnd;i++){
                     document.getElementById("pt_"+v.ids[i]).className = "protype";
                }
                document.getElementById("pt_"+id).className = "protypeClick";
                v.price = v.priceInfo[id];
                v.oldPrice = v.oldPriceInfo[id];
                v.productTotal = v.productTotalInfo[id];
            }
        }
    })
</script>
</body>
</html>
